<template>
  <!-- 【新增】点击卡片跳转至原新闻页面 -->
  <navigator :url="newsUrl" target="_blank" class="news-card-link" v-if="newsUrl">
    <view class="news-card">
      <view class="card-img-wrapper" v-if="imgUrl">
        <image 
          :src="imgUrl || '/static/default-news-img.png'" 
          class="card-img" 
          mode="widthFix" 
          @error="handleImgError"
        ></image>
      </view>
      <view class="card-content">
        <view class="card-title">{{ title || '无标题' }}</view>
        <view class="card-info">
          <text class="info-author">{{ author || '未知作者' }}</text>
          <text class="info-time">{{ time || '未知时间' }}</text>
        </view>
        <view class="card-tags">
          <text v-for="(tag, idx) in tags" :key="`tag-${idx}`" class="tag-item">{{ tag }}</text>
        </view>
        <view class="card-comment">
          <text>{{ comments || 0 }}条评论</text>
          <!-- 【新增】显示跳转标识 -->
          <text class="go-link">→ 查看原文</text>
        </view>
      </view>
    </view>
  </navigator>

  <!-- 无跳转链接的新闻卡片 -->
  <view class="news-card" v-else>
    <view class="card-img-wrapper" v-if="imgUrl">
      <image 
        :src="imgUrl || '/static/default-news-img.png'" 
        class="card-img" 
        mode="widthFix" 
        @error="handleImgError"
      ></image>
    </view>
    <view class="card-content">
      <view class="card-title">{{ title || '无标题' }}</view>
      <view class="card-info">
        <text class="info-author">{{ author || '未知作者' }}</text>
        <text class="info-time">{{ time || '未知时间' }}</text>
      </view>
      <view class="card-tags">
        <text v-for="(tag, idx) in tags" :key="`tag-${idx}`" class="tag-item">{{ tag }}</text>
      </view>
      <view class="card-comment">
        <text>{{ comments || 0 }}条评论</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'NewsView',
  props: {
    title: { type: String, default: '' },
    isTop: { type: Boolean, default: false },
    author: { type: String, default: '' },
    comments: { type: [Number, String], default: 0 },
    time: { type: String, default: '' },
    tags: { type: Array, default: () => [] },
    imgUrl: { type: String, default: '' },
    newsUrl: { type: String, default: '' } // 【新增】接收新闻原文链接
  },
  methods: {
    handleImgError(e) {
      e.target.src = '/static/default-news-img.png';
    }
  }
};
</script>

<style scoped>
/* 跳转链接样式重置 */
.news-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.news-card {
  background-color: #fff;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

/*  hover 效果增强交互 */
.news-card:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.card-img-wrapper {
  width: 120px;
  flex-shrink: 0;
}
.card-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  line-height: 22px;
  margin-bottom: 8px;
}

.card-info {
  font-size: 12px;
  color: #999;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

.card-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.tag-item {
  font-size: 12px;
  color: #666;
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 2px;
}

.card-comment {
  font-size: 12px;
  color: #999;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 【新增】跳转标识样式 */
.go-link {
  color: #c91f37; /* 央视红配色 */
  font-size: 11px;
  margin-left: 8px;
}
</style>